<template>
<div>
<el-dialog
       :visible.sync="centerDialogVisible"
       width="100%"
       top='0'>
    <dialog1></dialog1>
       <span slot="footer" class="dialog-footer">
         <el-button @click="centerDialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
       </span>
     </el-dialog>
 <div class="header">
      <div class="switchMachine">
          <span>设备选择:</span>
          <button type="info">5号机</button>
          <button type="info">7号机</button>
      </div>
      <div class="historyPic">
          <span>历史趋势图</span>
          <div></div>
      </div>
      <div class="right">
          <div class="top">
              <div class="left">
                  <div>进气压力</div>
                  <input type="text" v-model="jinqiyali">
              </div>
              <div class="mid">
                  <div>进气温度</div>
                  <input type="text" v-model="jinqiwendu">
              </div>
              <div class="rightt">
                  <div>一级排气压力</div>
                  <input type="text" v-model="yijipaiqiyali">
              </div>
          </div>
          <div class="twoLine">
              <div class="left">
                  <div>二级排气压力</div>
                  <input type="text" v-model="erjipaiqiyali">
              </div>
              <div class="mid">
                  <div>一级排气温度A</div>
                  <input type="text" v-model="yijipaiqiwenduA">
              </div>
              <div class="rightt">
                  <div>一级排气温度B</div>
                  <input type="text" v-model="yijipaiqiwenduB">
              </div>
          </div>
          <div class="threeLine">
              <div class="left">
                  <div>二级排气温度A</div>
                  <input type="text" v-model="erjipaiqiwenduA">
              </div>
              <div class="mid">
                  <div>二级排气温度B</div>
                  <input type="text" v-model="erjipaiqiwenduB">
              </div>
              <div class="rightt">
                  <div>主电机电流</div>
                  <input type="text" v-model="zhudianjidianliu">
              </div>
          </div>
          <div class="bottom">
            <div>
                <span class="first">压缩气体能耗</span>
                <span class="second">{{yasuoqiti}}</span>
            </div>
            <div>
                <span class="first">总能耗</span>
                <span class="second">{{zongnenghao}}</span>
            </div>
            <div>
                <span class="first">净效率</span>
                <span class="second">{{jingxiaolv}}</span>
            </div>
            <div>
                <span class="first">排气量(标况)</span>
                <span class="second">{{paiqiliang}}</span>
            </div>
          </div>
          <div class="last">
              <button>计算</button>
              <button>保存</button>
              <button @click="qingling">清零</button>
              <button @click="openDialog">分级能效查看</button>
          </div>
      </div>
  </div>
</div>
  
</template>

<script>
import dialog1 from '@/views/dialog.vue'
export default {
    components:{
        dialog1
    },
data() {
    return {
        jinqiyali:'dd',
        jinqiwendu:'dd',
        yijipaiqiyali:'dd',
        erjipaiqiyali:'dd',
        yijipaiqiwenduA:'dd',
        yijipaiqiwenduB:'dd',
        erjipaiqiwenduA:'dd',
        erjipaiqiwenduB:'dd',
        zhudianjidianliu:'dd',
        yasuoqiti:'压缩气体能耗',
        zongnenghao:'总能耗',
        jingxiaolv:'净效率',
        paiqiliang:'排气量',
        centerDialogVisible:false
    }
},
   methods: {
    qingling() {
        this.jinqiyali = ''
        this.jinqiwendu = ''
        this.yijipaiqiyali = ''
        this.erjipaiqiyali = ''
        this.yijipaiqiwenduA = ''
        this.yijipaiqiwenduB = ''
        this.erjipaiqiwenduA = ''
        this.erjipaiqiwenduB = ''
        this.zhudianjidianliu = ''
    },
    openDialog() {
        this.centerDialogVisible = true
    }
}
}
</script>

<style lang='less' scoped>
.header {
    width: 100%;
    height: 100%;
    background-color: rgb(91, 155, 213);
    display: flex;
    // justify-content: center;
    align-items: center;
    .switchMachine {
        width: 200px;
        height: 800px;
        background-color:rgb(68, 114, 196);
        font-size: 20px; 
        color: white;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        color: white;
        span {
            margin-left: 20px;
        }
        button {
            margin-bottom: 30px;
        }
    }
}
.historyPic {
    background-color: rgb(112, 173, 71);
    width: 600px;
    height: 800px;
    margin-left: 30px;
    span {
        display: block;
        font-weight: 700;
        margin: 30px auto;
        width: 100px;
    }
    div {
        width: 500px;
        height: 600px;
        background-color: #fff;
    }
}
.right {
    width: 1000px;
    height: 800px;
    // background-color:pink;
    margin-left: 40px;
    input {
        margin-top: 20px;
        margin-bottom: 20px;
        display: inline-block;
        width: 160px;
        height: 30px;
        background-color: rgb(165, 165, 165);
    }
    .top,
    .twoLine,
    .threeLine
    {
        margin-top: 30px;
        .left {
            display: inline-block;
        }
        .mid {
            display: inline-block;
            margin:0 30px;
        }
        .rightt {
            display: inline-block;

        }
    }
    .bottom {
        display: flex;
        flex-direction: column;
        div {
            margin-left: 70px;
            width: 500px;
            height: 40px;
            margin-bottom: 30px;
            line-height: 40px;
            .first {
                display: inline-block;
                width: 100px;
                height: 100%;
                text-align: left;
                // line-height: 40px;
            }
            .second {
                display: inline-block;
                width: 168px;
                height: 100%;
                margin-left: 30px;
                background-color: rgb(237, 125, 49);
            }
        }
    }
    .last {
        button {
            width: 100px;
            height: 40px;
            color: #fff;
            background-color: rgb(255, 192, 0);
            border: 0;
            margin-right: 20px;
        
        }
    }
    /deep/.el-dialog {
        // width: 70%;
        height: 100%;
    }
}
</style>
